<template>
  <el-drawer title="生命周期" v-model="drawerVisible" :direction="direction" :before-close="handleClose" show-close>
    <div style="width: 100%" class="container">
      <div v-for="(item, index) in stepData" :key="index" class="grid-item">
        <div class="step">
          <span>
            <span style="border-radius: 50%; border: 2px solid; margin-right: 5px">
              <span style="
                  display: inline-block;
                  user-select: none;
                  text-align: center;
                  font-weight: 700;
                  line-height: 1;
                  padding: 4px;
                ">
                {{ index + 1 }}</span>
            </span>
            <span>{{ item.lifeName }}</span>
          </span>
          <br />

          <i style="font-size: 12px; line-height: 1">{{ item.createTime }}</i>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getLife } from '@/api/rfid/label'
export default {
  name: 'labelLifeDrawer',
  data() {
    return {
      drawerVisible: false,
      direction: 'rtl',
      createTime: '',
      stepData: [],
    }
  },
  methods: {
    init(row) {
      let firstObj = {
        createTime: row.createTime,
        lifeName: '新建',
      }
      getLife(row.labelId)
        .then((res) => {
          if (res.data.code === 200) {
            this.stepData = res.data.data
            this.stepData.unshift(firstObj)
            this.drawerVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleClose(done) {
      done()
    },
  },
}
</script>
<style lang="less" scoped>
/** 可配置的参数 可以调整试试 */
@colNum: 3; // 单行排列的步骤 试试 2、3、4、5、6
@colEven: @colNum * 2; // 两行元素数
@lineWidth: 0.8rem; // 步骤间连线长度
@rowDistance: 0.8rem; // 行间距
@colDistance: @lineWidth; // 列间距
@arrowSize: 6px; // 箭头大小
@stepColor: #409eff; // 步骤颜色

.container {
  display: grid;
  grid-template-columns: repeat(@colNum, 1fr);
  gap: @rowDistance @colDistance;
  // padding-top: @rowDistance;
  padding: 5px 10px;
}

.grid-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    position: absolute;
    content: '';
    right: -@lineWidth;
    width: @lineWidth;
    height: 0;
    border-top: 1px dashed @stepColor;
  }

  &::after {
    content: '';
    position: absolute;
    right: (-@colDistance / 2);
    transform: translateX(50%);
    border-top: (@arrowSize / 1.4) solid transparent;
    border-left: @arrowSize solid @stepColor;
    border-bottom: (@arrowSize / 1.4) solid transparent;
  }

  // 给每行最后一个步骤（除最后一行）添加向下的连接箭头
  &:nth-child(@{colNum}n) {
    &:not(:last-child) {
      .step {
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -(@rowDistance / 2);
          height: @lineWidth;
          border-left: 1px dashed @stepColor;
          transform: translate(-50%, 50%);
        }

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -(@rowDistance / 2);
          border-top: @arrowSize solid @stepColor;
          border-left: (@arrowSize / 1.4) solid transparent;
          border-right: (@arrowSize / 1.4) solid transparent;
          transform: translate(-50%, 50%);
        }
      }
    }
  }

  each(range(@colEven), {
    &:nth-child(@{colEven}n+@{value}) {
      @isEvenLine: boolean(@value > @colNum);
      @modNum: mod(@value, @colEven); // 余数 1、2、3、4、5、0
      color: if(@isEvenLine, #7dbcf7, #409eff);

      /** 偶数行旋转箭头，步骤倒序排列（使用transform交换位置） */
      & when (@isEvenLine) {
        @transN: (@colNum + 1 + @colEven - @value - @value);
        transform: translateX(calc(@transN * 100% + @transN * @colDistance));

        &::after {
          transform: translateX(50%) rotate(180deg) !important; // 旋转箭头
        }
      }

      // 最右排(n & n + 1 位)隐藏多余的箭头（如果container设置了overflow:hidden 则不用处理）
      & when (@modNum=@colNum), (@modNum=@colNum+1) {
        &::before, &::after {
          display: none;
        }
      }

      // 最后一个步骤在奇数行 需要隐藏连线箭头
      & when not (@isEvenLine) {
        &:last-child {
          &::before, &::after {
            display: none;
          }
        }
      }

    }
  });
}

.step {
  position: relative;
  width: 100px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  border: 1px solid @stepColor;
  border-radius: 4px;
}
</style>
